
#bootstrap-touch-slider{ margin-top: 70px}
.slide1 h1{ font-size: 60px; margin-bottom: 10px;}
.slide1 h1 span{ font-size: 45px;}
.slide1 .jd-btn{ display: inline-block; width: 200px; height: 40px; border-radius: 20px; border:1px solid #9fcdff; text-align: center; line-height: 40px; font-size: 20px; color: #9fcdff}
.slide1 .jd-btn:hover{ text-decoration: none;  background: #005bc4}
.slide1 .bg{ background: rgba(0,97,206,.6); position: absolute; width: 1050px; height: 350px; top:0; left: -50px;}
.slide1 p{ top: 140px;}
.slide1 a{top: 250px;}
.slide1 h1,.slide1 p,.slide1 a{  position: absolute; z-index: 3}
.slide2 p{ margin: 0 auto; width: 380px; border: 1px solid #fff; height: 40px; line-height: 40px; text-align: center}
.slide3 h1{ color: #0057cf}
.slide3 p{ color: #fff}
.indicators-line > .carousel-indicators{right: 50%}
.about-us-index{ position: relative; height: 550px;}
.about-us-index .h-bg{position: absolute; top:0; height:150px; background: #f2f2f2; width: 100%;}
.about-us-index .about-us-box{ position: absolute; width: 1400px; top:30px; left: 50%; margin-left: -700px; padding: 30px;  background: #fff; box-shadow: 0 1px 20px rgba(0, 0, 0, 0.1); }
.about-us-index .about-us-box .img-box{ height: 400px; background-size: cover; background-position: center center; background-repeat: no-repeat;}
.index-title{}
.index-title h1{ margin-bottom: 0; font-size: 50px; color: #dde7f2; font-weight: bolder}
.index-title h2{ margin-top: 0; font-size: 32px; color: #333; font-weight: bold}
.about-us-index .about-us-box .text{ height:150px;  margin-top: 20px; font-size: 16px; line-height: 30px;}
.more-index{ display: inline-block; margin-top: 20px; width: 180px; text-align: center; font-size: 20px; border-radius: 20px; height: 40px; line-height: 40px;
    border: 1px solid #8ec31f; color: #8ec31f; }
.more-index:hover{ text-decoration: none; color: #fff; background: #8ec31f; }
.project-index{ margin: 0 auto; max-width: 1400px}
.project-index-box{ position: relative; height: 620px;}
.project-index .f-bg{ background: #006aee; height: 150px; position: absolute; width: 100%; bottom: 0;}
.project-index .project-index-list-box{ position: absolute; width: 100%; top: 20px; z-index:2; margin-left: 0; padding-right: 15px;}
.project-index .project-index-list-box .img-box{ margin-right: 15px; margin-bottom: 15px; position: relative; width: 100%; height: 96%; overflow: hidden;}
.project-index .project-index-list-box .img-box .before-hover{ position:absolute; width: 100%; height: 100%; z-index: 10}
.project-index .project-index-list-box .img-box .before-hover .before-hover-box{ position: absolute;width:100%; top: 50%; margin-top: -70px; height:120px; color: #fff; z-index: 2;
    text-align: center}
.project-index .project-index-list-box .img-box .before-hover .before-hover-box h3{ margin-top: 0}
.project-index .project-index-list-box .img-box .before-hover .bg{ position: absolute; width:100%; height: 100%; background: rgba(0,0,0,.4)}
.portfolio-item { padding-right: 0; overflow: hidden; height: 300px;}
.portfolio-item img { position: absolute; top: 50%; left: 50%; width: auto; height: auto; min-width: 121%; min-height: auto; max-width: 121%; max-height: auto;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);}

.portfolio-item__info { position: absolute; top: 7px; left: 7px; display: flex; flex-direction: column; align-items: center;
    justify-content: center; width: calc(100% - 2 * 7px);
    height: calc(100% - 2 * 7px);
    background-color: rgba(255, 255, 255, 0.7);}

.portfolio-item__header { position: relative; margin: 0 0 20px 0; padding: 15px 0; font-size: 22px; text-transform: uppercase;
    letter-spacing: 2px;}
.portfolio-item__header:after { position: absolute; left: 0; bottom: 0; display: block; height: 2px; width: 100%;
    content: '';  background-color: #8D909B;}
.portfolio-item__links { display: flex;}
.portfolio-item__link-block { position: relative; width: 35px; height: 35px; margin-right: 10px;}
.portfolio-item__link-block:last-child { margin-right: 0;}
.portfolio-item__link { transition-property: all; transition-duration: 0.2s;
    transition-timing-function: linear; transition-delay: 0s; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    color: #101010; text-decoration: none;  border: 1px solid #101010; border-radius: 50%;}
.portfolio-item__link:hover { color: #fff; background-color: #101010;}

/* EFFECT #1 STYLES */
.portfolio-item--eff1 .portfolio-item__info {
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
    opacity: 0;

}
.portfolio-item--eff1 .portfolio-item__header {
    top: -10px;
    opacity: 0;
}
.portfolio-item--eff1 .portfolio-item__header:after {
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
}
.portfolio-item--eff1 .portfolio-item__link-block { top: 20px; opacity: 0;}

.portfolio-item--eff1:hover .portfolio-item__info {
    transition-property: all;
    transition-duration: 0.4s;
    transition-timing-function: linear;
    transition-delay: 0s;
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    z-index: 99;
}
.portfolio-item--eff1:hover .before-hover{ opacity: 0;transition-property: all;
    transition-duration: 0.4s;
    transition-timing-function: linear;
    transition-delay: 0s;
    -webkit-transform: scale(1);
    transform: scale(1); }
.portfolio-item--eff1:hover .portfolio-item__header {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 0.45s;
    top: 0;
    opacity: 1;
}
.portfolio-item--eff1:hover .portfolio-item__header:after {
    transition-property: all;
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.63, 0.01, 0, 1.39);
    transition-delay: 0.65s;
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}
.portfolio-item--eff1:hover .portfolio-item__link-block {
    top: 0;
    opacity: 1;
}
.portfolio-item--eff1:hover .portfolio-item__link-block:first-child {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 0.85s;
}
.portfolio-item--eff1:hover .portfolio-item__link-block:nth-child(2) {
    transition-property: all;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    transition-delay: 0.95s;
}
.new-index{ margin-top: 50px;}
.new-content { margin: 0 auto; margin-top: 40px; position: relative; height: 480px; background: #ebebeb; width: 1400px;}
.border-box { position: absolute; top: -5px; border: 3px solid #cfcfcf; width: 1200px; left: 200px; height: 490px; background: #fff; box-shadow: 0 0 20px #dfdfdf}
.border-box .img-box{ position: absolute; top: 20px; width: 510px; height: 440px; margin-left: -180px; background-size: cover; background-repeat: no-repeat; background-position: center center}
.border-box .img-box .img-box-bg{ position: absolute; background: rgba(0,0,0,.7); width: 510px; bottom: 0; height: 40px;}
.border-box .img-box .main-new{ position: absolute; padding:0 20px;  width:510px;bottom: 0; height: 40px; color: #fff;}
.border-box .img-box .main-new h1{ font-size: 18px;line-height: 40px; margin: 0}
.border-box .img-box .main-new p{ font-size: 14px;}
.border-box .img-box .main-new .text{ font-size: 14px; line-height: 26px;text-align: justify;}
.border-box .text-box{position: absolute;top: 20px; width: 844px; height: 440px; overflow: hidden; right: 20px;box-shadow: 0 0 20px #dfdfdf}
.border-box .text-box ul{ padding: 0 20px;}
.border-box .text-box ul li a{ display: block; color: #333}
.border-box .text-box ul li .l{  float: left; padding-top: 20px; width: 60px;}
.border-box .text-box ul li .r{  float: right; width: 740px; }
.border-box .text-box ul li h1{ font-size: 18px;}
.border-box .text-box ul li a p{ color: #999; font-size: 14px; line-height:24px; }
.project-index-more{text-align: center; margin-top: 40px;}
.honor-index{position: relative; margin-top: 50px; height: 920px; background:  url("../images/honor-bg.png") no-repeat center center; background-size: cover}
.honor-index .index-title{ margin-top: 20px;}
.honor-index .index-title h1{ color: rgba(255,255,255,.4)}
.honor-index .index-title h2{color: rgba(255,255,255,.8)}
.honor-index .index-title{ position: absolute; width: 500px; left: 50%; margin-left: -250px;}
.honor-index .bg{background: rgba(0,0,0,.7); width: 100%; height: 100% }
.honor-index .honor-index-more{ position: absolute; width: 180px; left: 50%; margin-left: -90px; bottom: 50px;}
.honor-index .img-box{ position: absolute; width: 1400px; left: 50%; margin-left: -700px; height: 550px;  top: 230px;}

.honor-index .img-box .swiper-container {
    padding-bottom: 60px;
}

.honor-index .img-box  .swiper-slide {
    width: 560px;
    height: 465px;
    background: #fff;
    box-shadow: 0 8px 30px #555;
}
.honor-index .img-box  .swiper-slide img{ width: 100%; border:4px solid #fff;
    display:block;
}
.honor-index .img-box  .swiper-slide p { font-size: 16px;
    line-height: 60px;
    padding-top: 0;
    text-align: center;
    color: #636363;
    margin: 0;
}

.honor-index .img-box .swiper-pagination {
    width: 100%;
    bottom: 20px;
}

.honor-index .img-box .swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 5px;
    border: 3px solid #fff;
    background-color: #d5d5d5;
    width: 10px;
    height: 10px;
    opacity: 1;
}

.honor-index .img-box .swiper-pagination-bullets .swiper-pagination-bullet-active {
    border: 3px solid #00aadc;
    background-color: #fff;
}

.honor-index .img-box .swiper-button-prev {
    left: -30px;
    width: 45px;
    height: 45px;
    background: url(../images/wm_button_icon.png) no-repeat;
    background-position: 0 0;
    background-size: 100%;
}

.honor-index .img-box .swiper-button-prev:hover {
    background-position: 0 -46px;
    background-size: 100%
}

.honor-index .img-box .swiper-button-next {
    right: -30px;
    width: 45px;
    height: 45px;
    background: url(../images/wm_button_icon.png) no-repeat;
    background-position: 0 -93px;
    background-size: 100%;
}

.honor-index .img-box .swiper-button-next:hover {
    background-position: 0 -139px;
    background-size: 100%
}

@media (min-width: 1200px) and (max-width: 1399px){
    .new-content{ width: 1100px;}
    .border-box{ width: 890px;}
    .border-box .text-box{ width: 534px;}
    .border-box .text-box ul li .r{ width:420px; }
    .border-box .text-box ul li a p {height: 50px;overflow: hidden; margin: 0;}
    .border-box .text-box ul li h1 {    height: 20px; overflow: hidden;}
    .about-us-index{ height: 480px;}
    .about-us-index .about-us-box{ width: 1170px; margin-left: -585px;}
    .honor-index{ height: 810px;}
    .honor-index .img-box{ width: 1180px;margin-left: -590px; height: 480px;}
    .honor-index .img-box  .swiper-slide{ width: 490px; height: 410px;}
}
@media (min-width: 1024px) and (max-width: 1199px){
    .new-content{ width: 1100px;}
    .border-box{ width: 890px;}
    .border-box .text-box{ width: 534px;}
    .border-box .text-box ul li .r{ width:420px; }
    .border-box .text-box ul li a p {height: 50px;overflow: hidden; margin: 0;}
    .border-box .text-box ul li h1 {    height: 20px; overflow: hidden;}
    .about-us-index{ height: 510px;}
    .about-us-index .about-us-box{ width: 970px; margin-left: -485px;}
    .about-us-index .about-us-box .text{ height: 90px; overflow: hidden}
    .honor-index{ height: 810px;}
    .honor-index .img-box{ width: 1180px;margin-left: -590px; height: 480px;}
    .honor-index .img-box  .swiper-slide{ width: 490px; height: 410px;}
    .index-title h1{ font-size: 26px;}
}
@media (min-width: 992px) and (max-width: 1023px){
    .new-content{ width: 960px; height: 380px;}
    .border-box .img-box{ height: 355px;}
    .border-box{ width: 760px; height: 400px;}
    .border-box .text-box{ width: 404px;height: 355px;}
    .border-box .text-box ul li .l{ width: 40px;}
    .border-box .text-box ul li .r{ width:310px; }
    .border-box .text-box ul li a p {height: 50px;overflow: hidden; margin: 0; font-size: 14px;}
    .border-box .text-box ul li h1 {    height: 18px; overflow: hidden; font-size: 16px; margin-top: 10px; margin-bottom: 5px;}
    .border-box .text-box ul li .l span{ margin: 0;}
    .about-us-index .about-us-box{ width: 970px; margin-left: -482px;}
    .honor-index{ height: 810px;}
    .honor-index .img-box{ width: 1180px;margin-left: -590px; height: 480px;}
    .honor-index .img-box  .swiper-slide{ width: 490px; height: 410px;}
    .about-us-index .about-us-box .text{ height: 90px; overflow: hidden}
    .index-title h1{ font-size: 24px;}
}
@media (min-width: 768px) and (max-width: 991px){

    .new-content{ width: 760px; height: 290px;}
    .border-box .img-box .img-box-bg{ width: 100%}
    .border-box .img-box{ height: 255px;width: 310px;}
    .border-box .img-box .main-new{}
    .border-box .img-box .main-new h1{ font-size: 16px; line-height: 40px;}
    .border-box .img-box .main-new p{ font-size: 14px;}
    .border-box .img-box .main-new .text{ font-size: 14px; line-height: 18px;height: 50px; overflow: hidden;text-align: justify;}
    .border-box{ width: 560px; height: 300px;}
    .border-box .text-box{ width: 404px;height: 255px;}
    .border-box .text-box ul{ padding: 0 10px;}
    .border-box .text-box ul li .l{ width: 40px;}
    .border-box .text-box ul li .r{ width:330px; }
    .border-box .text-box ul li a p {height: 20px;overflow: hidden; margin: 0; font-size: 14px;}
    .border-box .text-box ul li h1 {    height: 18px; overflow: hidden; font-size: 16px; margin-top: 10px; margin-bottom: 5px;}
    .border-box .text-box ul li .l span{ margin: 0;}
    .about-us-index{ height: 570px;}
    .about-us-index .about-us-box{ width: 700px; margin-left: -350px;}
    .about-us-index .about-us-box .img-box{ height: 250px;}
    .project-index-box{ height: 1220px;}
    .honor-index{ height: 810px;}
    .honor-index .img-box{ width: 1180px;margin-left: -590px; height: 480px;}
    .honor-index .img-box  .swiper-slide{ width: 490px; height: 410px;}
    .about-us-index .about-us-box .text{ height: 90px; overflow: hidden}
    .honor-index{position: relative; margin-top: 50px; height: 920px; background:  url("../images/honor-bg_x.png") no-repeat center center; background-size: cover}
}
@media screen and (max-width: 767px){
    .slide3 h1{ margin-top: -15px}
    .slide3 h1 img{width: 150px}
    .portfolio-item img { position: absolute; top: 50%; left: 50%; width: auto; height: auto; min-width: 155%; min-height: auto; max-width: 155%; max-height: auto;}
    .new-content{ width:100%; height: auto;}
    .new-index{ height: auto}
    .border-box{ position: relative; width: 100%; left: 0;height:auto; border:none;}
    .border-box .img-box{ position: relative; width: 100%; margin-left: 0;height: 255px; top:0;}
    .border-box .img-box .img-box-bg{ width: 100%;}
    .border-box .img-box .main-new{}
    .border-box .img-box .main-new h1{ font-size: 16px; line-height: 40px;}
    .border-box .img-box .main-new p{ font-size: 14px;}
    .border-box .img-box .main-new .text{ font-size: 14px; line-height: 18px;height: 53px; overflow: hidden;text-align: justify;}
    .border-box .text-box{position: relative; width: 100%;height: 255px; box-shadow: none; right: 0;padding: 10px 0; top:0;}
    .border-box .text-box ul{ padding: 0 10px;}
    .border-box .text-box ul li .l{ width: 10%; padding-top: 10px;}
    .border-box .text-box ul li .r{ width: 88%; }
    .border-box .text-box ul li a p {height: 20px;overflow: hidden; margin: 0; font-size: 14px;}
    .border-box .text-box ul li h1 {    height: 18px; overflow: hidden; font-size: 16px; margin-top: 10px; margin-bottom: 5px;}
    .border-box .text-box ul li .l span{ margin: 0;}
    .about-us-index{ height: auto; margin-bottom: 20px;}
    .about-us-index .about-us-box{ position: relative; left: 0; top:0; padding: 12px; width: 100%; margin-left: 0px;}
    .project-index .project-index-list-box .img-box .before-hover .before-hover-box h3{ font-size: 16px;}
    .project-index .project-index-list-box .img-box .before-hover .before-hover-box{ height: 90px; margin-top: -45px;}
    .portfolio-item--eff1 .portfolio-item__header{ font-size: 16px;}
    .about-us-index .about-us-box .img-box{ height: 220px}
    .project-index-box{ height: auto}
    .project-index .project-index-list-box{ position: relative}
    .project-index .f-bg{ display: none}
    .honor-index{ height: 510px;}
    .honor-index .img-box{position: relative; padding: 0 12px; width: 100%;margin-left: 0; left: 0; height: 310px; top: 0px;margin-top: 20px;}
    .honor-index .honor-index-more{ bottom: 40px;    z-index: 100; width: 120px; margin-left: -60px;}
    .honor-index .img-box .swiper-button-next{ display: none}
    .honor-index .img-box .swiper-button-prev{  display: none}
    .honor-index .img-box  .swiper-slide{ width: 280px; height: 260px;}
    .about-us-index .about-us-box .text{ height: 90px; overflow: hidden}
    .portfolio-item{ height: 160px;}
    .slide1 h1{ font-size: 16px;}
    .slide1 h1 span{ font-size: 16px;}
    .slide1 p { display: none}
    .slide1 .bg{ width: 100%; height: 80px;}
    .slide2 img{ width: 25%;}
    .slide2 h1{ margin-top: 0}
    .slide2 p{ width: 50%; height: 20px; line-height: 20px; font-size: 12px;}
    .honor-index{position: relative; margin-top: 50px; background:  url("../images/honor-bg_x.png") no-repeat center center; background-size: cover}
    .honor-index .index-title{position: relative; width: 100%;left: 0;margin-left: 0; margin: 0 auto; padding-top: 20px;z-index: 100;}
    .index-title h1{ font-size: 24px;}
    .index-title h2{ font-size: 22px; color: #212732}
    .honor-index .bg{ top:0; position: absolute;}
    .more-index{ height: 30px; line-height: 30px; width: 120px; font-size: 16px;}
    .honor-index .img-box .swiper-pagination{ width: calc(100% - 20px)}
}
